<template>
	<view class="page_c" v-if="loaded">
		<view class="logo">
			<fr-image class="img" mode="aspectFill" :src="(imgHost + info.pic)||'/static/image/none-img.jpg'" />
		</view>
		<view class="title">{{ info.shop_name }}</view>
		<view class="list" @click="tel">
			<view class="label">一键拨号</view>
			<view class="value">
				<text class="text">{{ info.platform_tel }}</text>
				<u-icon name="phone" size="18" color="#333"></u-icon>
			</view>
		</view>
		<view class="list">
			<view class="label">门店地址</view>
			<view class="value">{{ info.shop_address }}</view>
		</view>
		<view class="list">
			<view class="label">营业时间</view>
			<view class="value">{{info.shop_time}}</view>
		</view>
		<view class="env"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';

	const { imgHost } = getApp().globalData;
	let loaded = ref(false)
	let info = ref({});

	request({
		url: '/api/aboutuse?set_id=9',
		loadingTip: '加载中'
	}).then(res => {
		info.value = res;
		loaded.value = true;
	});

	const tel = () => {
		uni.makePhoneCall({
			phoneNumber: info.value.platform_tel
		});
	};
</script>

<style scoped lang="scss">
	.page_c {
		padding: 40px 14px 10px;
	}

	.logo {
		margin: 0 auto 10px;
		width: 80px;
		height: 80px;
		border-radius: 40px;
		overflow: hidden;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		text-align: center;
		padding-bottom: 30px;
		font-size: 18px;
		font-weight: bold;
	}

	.list {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #f7f7f7;

		.label {
			flex-shrink: 0;
			padding-right: 30px;
			color: #999;
		}

		.value {
			flex: 1;
			display: flex;
			align-items: center;

			.text {
				margin-right: 5px;
			}
		}
	}
</style>